<!--
 * @Author: lee_124
 * @Date: 2022-01-25 16:11:15
 * @LastEditTime: 2022-01-26 11:42:05
 * @LastEditors: lee_124
 * @Description: 
 * @FilePath: /public_demo/src/views/quick/index.vue
-->
<template>
  <div class="root-container">
    <button @click="clickDeb">防抖</button>
    <br />多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！
    <br />
    <p class="mt40"></p>
    <button @click="clickThr">节流</button>
    <br />事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
  </div>
</template>
<script>
import { _throttle, _debounce } from "@/utils/util.js";
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    clickDeb: _debounce(
      function() {
        this.cb("防抖");
      },
      1000,
      true
    ),
    clickThr: _throttle(
      function() {
        this.cb("节流");
      },
      1000,
      true
    ),
    cb(c) {
      console.log("回调函数执行 => ", c);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>